<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'live-player'})}`"></div>
	<onekit-view onekit-class="page-body">
		<onekit-view onekit-class="page-section">
			<onekit-live-player id="player" :src="videoSrc" mode="RTC" autoplay @Statechange="handleLivePlayerStateChange" @Error="handleLivePlayerError"></onekit-live-player>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="page-url">视频地址 (支持flv, rtmp):</onekit-view>
			<onekit-input onekit-class="input" name="input" placeholder="视频播放链接" :value="videoSrc" @Input="handleVideoSrcInput"></onekit-input>
			<onekit-button type="primary" @Tap="handleScanQRCode">扫码</onekit-button>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-button onekit-class="page-body-button" type="primary" @Tap="handlePlay">播放</onekit-button>
			<onekit-button onekit-class="page-body-button" type="primary" @Tap="handlePause">暂停</onekit-button>
			<onekit-button onekit-class="page-body-button" type="primary" @Tap="handleStop">停止</onekit-button>
			<onekit-button onekit-class="page-body-button" type="primary" @Tap="handleResume">恢复</onekit-button>
			<onekit-button onekit-class="page-body-button" type="primary" @Tap="handleMute">静音</onekit-button>
		</onekit-view>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../../page/common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../../page/common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "live-player",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../../weixin2vue/wx.js';
import Macro from '../../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../../weixin2vue/OnekitComponent.js';
export default Page(ONEKIT_JSON,["videoSrc"],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'live-player',
        "path":'page/component/pages/live-player/live-player'
};
    },
    "data":{
        "videoSrc":""
},
    "onReady"(res){
      this.ctx = wx.createLivePlayerContext('player');
    },
    "handleScanQRCode"(){
      wx.scanCode({
        "complete":(res)=>{
          const {result} = res;
          this.setData({
              "videoSrc":result
});
        }
});
    },
    "handleLivePlayerStateChange"(e){
      console.log('live-player code:',e.detail.code);
    },
    "handleLivePlayerError"(e){
      console.error('live-player error:',e.detail.errMsg);
    },
    "handlePlay"(){
      this.ctx.play({
        "success":(res)=>{console.log('play success')},
        "fail":(res)=>{console.log('play fail')}
});
    },
    "handlePause"(){
      this.ctx.pause({
        "success":(res)=>{console.log('pause success')},
        "fail":(res)=>{console.log('pause fail')}
});
    },
    "handleStop"(){
      this.ctx.stop({
        "success":(res)=>{console.log('stop success')},
        "fail":(res)=>{console.log('stop fail')}
});
    },
    "handleResume"(){
      this.ctx.resume({
        "success":(res)=>{console.log('resume success')},
        "fail":(res)=>{console.log('resume fail')}
});
    },
    "handleMute"(){
      this.ctx.mute({
        "success":(res)=>{console.log('mute success')},
        "fail":(res)=>{console.log('mute fail')}
});
    },
    "handleVideoSrcInput"(e){
      this.setData({
        "videoSrc":e.detail.value
});
    }
});

</script>
<style 
 lang="css">
.onekit-live-player {
  display: flex ;
  width: 100% ;
  height: 325px ;
}
.page-body-button {
  margin-bottom: 15px ;
}
.page-url {
  margin: 0 auto 15px ;
  width: 90% ;
}
.onekit-input {
  width: 90% ;
  margin: 0 auto 15px ;
}
</style>